<template>
  <div class="page luckdraw-mobile-edit">
    <div class="luckdraw-mobile-edit-container">
      <div class="multi-input">
        <div class="input">
          <m-input title="验证码" placeholder="请输入短信验证码" type="number" v-model="smsCode" isLast></m-input>
        </div>
        <div class="handler">
          <a @click="getSmsCode">{{btnText}}</a>
        </div>
      </div>
      <div class="btn-section">
        <div class="btn-inner">
          <m-button text="提交" @onClick="onSubmitClick"></m-button>
        </div>
      </div>
    </div>
    <m-toast v-model="toastContent"></m-toast>
  </div>
</template>

<script>
import MInput from 'comp/m-input'
import MButton from 'comp/m-button'
import MToast from 'comp/m-toast'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MInput,
    MButton,
    MToast
  },
  data () {
    return {
      smsCode: '',
      toastContent: '',
      btnText: '获取',
      phone: '',
      openId: ''
    }
  },
  async mounted () {
    this.resetData()
    this.phone = this.$root.$mp.query.phone
    if (!this.phone) {
      wx.showModal({
        title: '操作异常',
        content: '手机号为空，无法执行此页面操作，请返回首页重试',
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            wx.reLaunch({
              url: '/pages/index/main'
            })
          }
        }
      })
    }
    this.openId = await this.getOpenId()
  },
  methods: {
    /**
     * 获取短信验证码
     */
    async getSmsCode () {
      if (this.btnText === '获取' || this.btnText === '重新获取') {
        await this.$store.dispatch('sendSms', {
          phone: this.phone,
          playerid: this.openId
        })
        wx.showToast({
          title: '发送成功'
        })
        this.showTimer()
      }
    },
    /**
     * 倒计时60s
     */
    showTimer () {
      let second = 60
      const timer = setInterval(() => {
        second--
        this.btnText = `${second}s`
        if (second === 0) {
          clearInterval(timer)
          this.btnText = '重新获取'
        }
      }, 1000)
    },
    /**
     * 提交绑定
     */
    async onSubmitClick () {
      await this.$store.dispatch('bindPhone', {
        playerid: this.openId,
        phone: this.phone,
        phonecode: this.smsCode
      })
      wx.showModal({
        title: '提示',
        content: '绑定成功',
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            wx.reLaunch({
              url: '/pages/me/main'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-mobile-edit {
  &-container {
    padding-top: 20rpx;
  }
  .multi-input {
    display: flex;
    align-items: center;
    background-color: #fff;
    .input {
      flex: 1;
    }
    .handler {
      width: 200rpx;
      img {
        display: block;
        width: 200rpx;
      }
      a {
        font-size: 32rpx;
        color: #488ff0;
        text-align: center;
      }
    }
  }
  .btn-section {
    width: 100%;
    margin-top: 30rpx;
    .btn-inner {
      padding: 20rpx 20rpx;
    }
  }
}
</style>
